<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="选择巡检设备" width="60%" align-center>
      <px-form
        v-if="queryParams"
        ref="formRef"
        class="custom-form-ui equip-form"
        :model="queryParams"
        label-position="right"
        label-width="120px"
        @submit.native.prevent
      >
        <px-row :gutter="16">
          <px-col :span="8">
            <px-form-item label="设备编号/名称" style="width: 100%">
              <px-input
                v-model="queryParams.value"
                style="width: 100%"
                placeholder="设备编号/名称"
                maxlength="50"
                clearable
                @blur="queryParams.value = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="16">
            <div class="equip-dialog-btn">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </div>
          </px-col>
        </px-row>
      </px-form>
      <px-row>
        <px-col>
          <InspectRulesTable
            v-model:query-params="queryParams"
            v-loading="loading"
            :table-data="tableData"
            :total="total"
            row-key="eqpId"
            :multiple="multiple"
            :tableColumns="tableEqiupColums"
            @select-items="selectTreeItems"
            @query-table="queryTable"
          />
        </px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer-btn">
          <px-button @click="close">取消</px-button>
          <px-button type="primary" @click="confirm"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { querySystemSelect } from "@/api/equip/archive";
import { queryInspectList } from "@/api/equip/inspectRule";
import { stringTrimOfParams } from "@/utils/common";
import { ref, watch } from "vue";
import { TableItem } from "../../types";
import InspectRulesTable from "./InspectRulesTable.vue";
const dialogVisible = defineModel("isView");
const queryParams = ref({ value: "", pageNum: 1, pageSize: 20 });
const tableData = ref<any>([]);

const tableEqiupColums = ref<TableItem[]>([
  { prop: "selection", minWidth: "55", fixed: "left" },
  { prop: "eqpId", label: "设备编号", minWidth: "160", showOverflowTooltip: true, fixed: "left" },
  { prop: "eqpName", label: "设备名称", minWidth: "160", showOverflowTooltip: true },
  {
    prop: "systemName",
    label: "设备系统",
    minWidth: "160",
    showOverflowTooltip: true
  },
  { prop: "typeName", label: "设备类型", minWidth: "160", showOverflowTooltip: true },
  { prop: "modelName", label: "设备型号", minWidth: "160", showOverflowTooltip: true },
  { prop: "positionNameAll", label: "位置信息", minWidth: "160", showOverflowTooltip: true }
]);
defineOptions({
  name: "SelectInspectRules"
});
const props = defineProps<{ className: string; inspectArea?: string[]; equipFilters?: any; multiple?: boolean }>();
const emits = defineEmits(["selectItems"]);
const total = ref(0);
let selected: any[] = [];
const systemCodes = ref([]);
const systemList = ref<any>([]);
const addSystemCode = (arr, codes) => {
  arr.forEach(item => {
    codes.push(item.code);
    if (item.children) {
      addSystemCode(item.children, codes);
    }
  });
};
// 重置筛选条件和设备列表
const resetTable = async () => {
  queryParams.value.value = "";
  queryTable();
};
const filterSystemList = (arr, codes) => {
  if (!props.equipFilters) {
    return;
  }
  const { systemCode } = props.equipFilters;
  arr.forEach(item => {
    if (systemCode.includes(item.code)) {
      codes.push(item.code);
      item.children && addSystemCode(item.children, codes);
    } else if (item.children) {
      filterSystemList(item.children, codes);
    }
  });
};
const getSystemList = async () => {
  const tempSystemList: any = await querySystemSelect({});
  systemList.value = tempSystemList || [];
  const systemCodesArr = [];
  filterSystemList(systemList.value, systemCodesArr);
  systemCodes.value = systemCodesArr;
};
const queryTable = async () => {
  const { className, inspectArea, equipFilters = {} } = props;
  const params = Object.assign(queryParams.value, {
    className: className,
    positionCodes: inspectArea ? [inspectArea] : [],
    typeIds: equipFilters?.typeId || [],
    systemCodes: systemCodes.value || [],
    categoryIds: equipFilters?.categoryId || []
  });
  let tableDataRaw: any = await queryInspectList(stringTrimOfParams(params));
  const { data, pageNum, pageSize, total: totalRaw } = tableDataRaw;
  queryParams.value.pageNum = pageNum;
  queryParams.value.pageSize = pageSize;
  total.value = totalRaw;
  tableData.value = data;
};
const loading = ref(false);
watch(
  dialogVisible,
  async val => {
    if (val) {
      await getSystemList();
      await queryTable();
    } else {
      total.value = 0;
      tableData.value = [];
    }
  },
  { immediate: true }
);
function selectTreeItems(val) {
  selected = val;
}
function close() {
  dialogVisible.value = false;
}
function confirm() {
  emits("selectItems", selected);
  dialogVisible.value = false;
  selected = [];
}
</script>
<style lang="scss" scoped>
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100% !important;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
}

:deep(.px-dialog) {
  padding-bottom: 24px;
}

:deep(.px-dialog__body) {
  padding: 0 24px;
}

:deep(.px-button + .px-button) {
  margin-left: 8px;
}

:deep(.px-dialog__footer) {
  padding: 0 24px;
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
